<template>
    <div id="nav">
      <!--  <el-breadcrumb separator-class="el-icon-arrow-right">            &lt;!&ndash;面包屑导航&ndash;&gt;
            <el-breadcrumb-item class="title">{{active.title}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="active.item1 != null">{{active.item1}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="active.item2 != null">{{active.item2}}</el-breadcrumb-item>
            <el-breadcrumb-item v-if="active.item3 != null">{{active.item3}}</el-breadcrumb-item>
        </el-breadcrumb>-->


      <!--  <el-page-header @back="goBack" content="详情页面">
        </el-page-header>-->
    </div>
</template>                                    <!--更推荐使用elementUI的页头组件来写这个-->

<script>
    import store from '@/store'
    import {mapState} from 'vuex'
    export default {
        data() {
            return {
                active: [],
                index1: null,
            }
        },
        computed: mapState(["menu"]),
        methods: {
            getIndex() {
                this.bus.$on('sendIndex',(data)=>{
                    this.index1 = data
                    this.active = this.menu[data-1]
                    // console.log(JSON.stringify(this.active)+'----')
                })
            }
        },
        created() {
            this.getIndex()
        },
        beforeDestroy() {
            // this.bus.$off('sendIndex') //销毁
        },
        store
    }
</script>

<style scoped>
    #nav .el-breadcrumb {
        height: 60px;
        line-height: 60px;
        padding-left: 20px;
    }
    #nav .el-breadcrumb .title{
        font-weight: bold;
    }
</style>
